<template>
  <div class="container">
    <div class="app-container">
      <div style="padding: 10px">
        <el-button type="primary" size="mini" @click="addPermissionClick('add')">添加权限</el-button>
      </div>
      <el-table :data="permissionList" row-key="id" default-expand-all>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template #default="{row}">
            <!-- row.type === 1 一级权限-->
            <!-- 只有一级权限才有添加 -->
            <el-button v-if="row.type ==1" type="text" size="mini" @click="addPermissionClick('add',row)">添加</el-button>
            <el-button type="text" size="mini" @click="addPermissionClick('edit',row)">编辑</el-button>
            <el-button type="text" size="mini" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加和编辑权限的弹层 -->
    <el-dialog :title="title" width="500px" :visible.sync="showDialog">
      <!-- 权限表单 -->
      <el-form ref="form" label-width="120px" :model="permissionForm" :rules="rules">
        <el-form-item prop="name" label="权限名称">
          <el-input v-model="permissionForm.name" size="mini" style="width:300px" />
        </el-form-item>
        <el-form-item prop="code" label="权限标识">
          <el-input v-model="permissionForm.code" size="mini" style="width:300px" />
        </el-form-item>
        <el-form-item prop="description" label="权限描述">
          <el-input v-model="permissionForm.description" size="mini" style="width:300px" type="textarea" />
        </el-form-item>
        <el-form-item prop="enVisible" label="开启">
          <el-switch v-model="permissionForm.enVisible" active-value="1" inactive-value="0" />
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button type="primary" size="mini" @click="submit">确定</el-button>
              <el-button size="mini" @click="close">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList, addPermission, getPermissionDetail, updatePermission, delPermission } from '@/api/permission'
import { translateListToTree } from '@/utils'
export default {
  data() {
    return {
      // 权限列表数据
      permissionList: [],
      // 是否展示弹层
      showDialog: false,
      permissionForm: {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '1', // 权限开启状态："1" 开启 "0" 不开启，默认开启
        type: 1, // 权限类型：1 一级权限 2 二级权限
        pid: 0 // 父级权限ID
      },
      btntype: '',
      // 数据校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '标识不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.permissionForm.id ? '修改' : '新增'
    }
  },
  created() {
    // 获取权限列表
    this.getPermissions()
  },
  methods: {
    // 添加权限
    async addPermissionClick(type, row) {
      this.btntype = type
      if (type === 'add') {
        if (row) {
          // alert(JSON.stringify(row))
          this.permissionForm.type = 2
          this.permissionForm.pid = row.id
        }
        console.log(type)
      } else if (type === 'edit') {
        console.log(type)
        const res = await getPermissionDetail(row.id)
        console.log(res)
        this.permissionForm = res
      }
      // 展示弹层
      this.showDialog = true
    },
    // 获取权限列表
    async getPermissions() {
      // 调用权限列表接口
      const res = await getPermissionList()
      // 递归
      this.permissionList = translateListToTree(res, 0)
      // this.depts = translateListToTree(await getDpartment(), 0)
      console.log(res)
    },
    // 添加
    async submit() {
      this.$refs.form.validate()
      if (this.btntype === 'edit') {
        await updatePermission(this.permissionForm)
        this.getPermissions()
      } else {
        await addPermission(this.permissionForm)
      }
      this.close()
    },
    // 取消,清除表单，关闭弹窗
    close() {
      this.$refs.form.resetFields()
      this.permissionForm = {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '1', // 权限开启状态："1" 开启 "0" 不开启，默认开启
        type: 1, // 权限类型：1 一级权限 2 二级权限
        pid: 0 // 父级权限ID
      }
      this.showDialog = false
      this.getPermissions()
    },
    // 删除
    async del(id) {
      await delPermission(id)
      this.$message.success('删除成功')
      this.getPermissions()
    }
  }
}
</script>
